<template>
  <view class="feedback-list-container">
    <view class="feedback-list">
      <view 
        class="feedback-item"
        v-for="feedback in feedbackList"
        :key="feedback.id"
        @click="goToDetail(feedback.id)"
      >
        <view class="feedback-header">
          <view class="type-badge" :class="'type-' + feedback.type">
            {{ getTypeText(feedback.type) }}
          </view>
          <view class="status-badge" :class="'status-' + feedback.status">
            {{ getStatusText(feedback.status) }}
          </view>
        </view>

        <text class="feedback-title">{{ feedback.title }}</text>
        <text class="feedback-content">{{ feedback.content }}</text>

        <view class="feedback-footer">
          <text class="feedback-time">{{ formatTime(feedback.createdAt) }}</text>
          <view class="reply-indicator" v-if="feedback.reply">
            <u-icon name="checkmark-circle-fill" size="16" color="#5daf34"></u-icon>
            <text class="reply-text">已回复</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="feedbackList.length === 0 && !loading" class="empty-state">
        <u-icon name="question-circle-fill" size="80" color="#ddd"></u-icon>
        <text class="empty-text">暂无反馈记录</text>
        <button class="empty-submit-btn" @click="goToSubmit">
          提交反馈
        </button>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn-container" v-if="feedbackList.length > 0">
      <button class="submit-btn" @click="goToSubmit">
        <u-icon name="plus" size="20" color="#fff"></u-icon>
        <text class="btn-text">提交新反馈</text>
      </button>
    </view>
  </view>
</template>

<script>
import { getMyFeedbacks } from '@/api/feedback'
import { formatTime } from '@/utils/date'

export default {
  data() {
    return {
      feedbackList: [],
      loading: false
    }
  },

  onLoad() {
    this.loadFeedbacks()
  },

  onShow() {
    this.loadFeedbacks()
  },

  onPullDownRefresh() {
    this.loadFeedbacks()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },

  methods: {
    async loadFeedbacks() {
      this.loading = true

      try {
        const res = await getMyFeedbacks()

        if (res.code === 200) {
          this.feedbackList = res.data || []
        }
      } catch (error) {
        console.error('加载反馈列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    getTypeText(type) {
      const typeMap = {
        'SUGGESTION': '建议',
        'BUG_REPORT': 'Bug',
        'COMPLAINT': '投诉',
        'OTHER': '其他'
      }
      return typeMap[type] || '其他'
    },

    getStatusText(status) {
      const statusMap = {
        'PENDING': '待处理',
        'PROCESSING': '处理中',
        'REPLIED': '已回复',
        'CLOSED': '已关闭'
      }
      return statusMap[status] || '待处理'
    },

    formatTime(time) {
      return formatTime(time)
    },

    goToDetail(id) {
      // TODO: 跳转到反馈详情页
      uni.showToast({
        title: '详情功能开发中',
        icon: 'none'
      })
    },

    goToSubmit() {
      uni.navigateTo({
        url: '/pages/user/feedback'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.feedback-list-container {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 30rpx;
  padding-bottom: 180rpx;
}

.feedback-list {
  .feedback-item {
    background: white;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    transition: all 0.3s;

    &:active {
      transform: scale(0.98);
    }

    .feedback-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16rpx;

      .type-badge {
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 22rpx;
        font-weight: 500;

        &.type-SUGGESTION {
          background: #e6f7ff;
          color: #1890ff;
        }

        &.type-BUG_REPORT {
          background: #fff7e6;
          color: #fa8c16;
        }

        &.type-COMPLAINT {
          background: #fff1f0;
          color: #ff4d4f;
        }

        &.type-OTHER {
          background: #f0f0f0;
          color: #666;
        }
      }

      .status-badge {
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 22rpx;
        font-weight: 500;

        &.status-PENDING {
          background: #fff7e6;
          color: #fa8c16;
        }

        &.status-PROCESSING {
          background: #e6f7ff;
          color: #1890ff;
        }

        &.status-REPLIED {
          background: #f6ffed;
          color: #52c41a;
        }

        &.status-CLOSED {
          background: #f0f0f0;
          color: #999;
        }
      }
    }

    .feedback-title {
      display: block;
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 12rpx;
    }

    .feedback-content {
      display: block;
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 20rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .feedback-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .feedback-time {
        font-size: 24rpx;
        color: #999;
      }

      .reply-indicator {
        display: flex;
        align-items: center;
        gap: 8rpx;

        .reply-text {
          font-size: 24rpx;
          color: #5daf34;
          font-weight: 500;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 150rpx 60rpx;

  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-top: 30rpx;
    margin-bottom: 40rpx;
  }
  
  .empty-submit-btn {
    background: linear-gradient(135deg, #5daf34, #7cb342);
    border: none;
    border-radius: 50rpx;
    padding: 20rpx 60rpx;
    font-size: 28rpx;
    color: white;
    font-weight: 500;
    box-shadow: 0 4rpx 16rpx rgba(93, 175, 52, 0.3);
  }
}

.submit-btn-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .submit-btn {
    width: 100%;
    height: 90rpx;
    background: linear-gradient(135deg, #5daf34, #7cb342);
    border: none;
    border-radius: 50rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    box-shadow: 0 8rpx 32rpx rgba(93, 175, 52, 0.35);
    
    .btn-text {
      color: white;
    }
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 4rpx 20rpx rgba(93, 175, 52, 0.25);
    }
  }
}
</style>

